﻿<div class="chatbar-contacts">
    <div class="contacts-search">
        <input type="text" class="searchinput" placeholder="Search Contacts" />
        <i class="searchicon fa fa-search"></i>
        <div class="searchhelper">Search Your Contacts and Chat History</div>
    </div>
    <ul class="contacts-list">
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/divyia.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Divyia Philips</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    last week
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Nicolai-Larson.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Adam Johnson</div>
                <div class="contact-status">
                    <div class="offline"></div>
                    <div class="status">left 4 mins ago</div>
                </div>
                <div class="last-chat-time">
                    today
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/John-Smith.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">John Smith</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    1:57 am
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Osvaldus-Valutis.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Osvaldus Valutis</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    today
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Javi-Jimenez.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Javi Jimenez</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    today
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Stephanie-Walter.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Stephanie Walter</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    yesterday
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Sergey-Azovskiy.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Sergey Azovskiy</div>
                <div class="contact-status">
                    <div class="offline"></div>
                    <div class="status">offline since oct 24</div>
                </div>
                <div class="last-chat-time">
                    22 oct
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/Lee-Munroe.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Lee Munroe</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    today
                </div>
            </div>
        </li>
        <li class="contact">
            <div class="contact-avatar">
                <img src="assets/img/avatars/divyia.jpg" />
            </div>
            <div class="contact-info">
                <div class="contact-name">Divyia Philips</div>
                <div class="contact-status">
                    <div class="online"></div>
                    <div class="status">online</div>
                </div>
                <div class="last-chat-time">
                    last week
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="chatbar-messages" style="display: none;">
    <div class="messages-contact">
        <div class="contact-avatar">
            <img src="assets/img/avatars/divyia.jpg" />
        </div>
        <div class="contact-info">
            <div class="contact-name">Divyia Philips</div>
            <div class="contact-status">
                <div class="online"></div>
                <div class="status">online</div>
            </div>
            <div class="last-chat-time">
                a moment ago
            </div>
            <div class="back">
                <i class="fa fa-arrow-circle-left"></i>
            </div>
        </div>
    </div>
    <ul class="messages-list">
        <li class="message">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Me</div>
                <div class="message-time">10:14 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
        <li class="message reply">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Divyia</div>
                <div class="message-time">10:15 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
        <li class="message">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Me</div>
                <div class="message-time">10:14 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
        <li class="message reply">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Divyia</div>
                <div class="message-time">10:15 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
        <li class="message">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Me</div>
                <div class="message-time">10:14 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
        <li class="message reply">
            <div class="message-info">
                <div class="bullet"></div>
                <div class="contact-name">Divyia</div>
                <div class="message-time">10:15 AM, Today</div>
            </div>
            <div class="message-body">
                Hi, Hope all is good. Are we meeting today?
            </div>
        </li>
    </ul>
    <div class="send-message">
        <span class="input-icon icon-right">
            <textarea rows="4" class="form-control" placeholder="Type your message"></textarea>
            <i class="fa fa-camera themeprimary"></i>
        </span>
    </div>
</div>
